
<template>
    <div class="h-450px" :id="'keyword' + index">

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'

const props = defineProps({
    xAxis: {
        type: Array,
        default: () => []
    },
    series: {
        type: Array,
        default: () => []
    },
    index: {
        type: Number,
        default: 0
    }
})

onMounted(() => {
    const chartDom = document.getElementById('keyword' + props.index);
    const myChart = echarts.init(chartDom);
    let option;

    option = {
        xAxis: {
            type: 'category',
                data: props.xAxis
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: props.series,
                    type: 'line',
                    smooth: true
                }
        ]
    };

    option && myChart.setOption(option);
})
</script>

<style lang="scss">

</style>
